<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2023-06-12 16:55:37
 * @LastEditors: qingyang
 * @LastEditTime: 2023-06-15 16:31:01
-->
<template>
  <base-dialog
    :title="title"
    append-to-body
    destroy-on-close
    :width="640"
    v-model:visible="dialogVisible"
    @confirm="dialogSubmit"
    confirm-text="提 交"
    @cancel="dialogVisible = false"
    :loading="loading"
  >
    <el-form ref="formRef" :model="form" :rules="formRules" label-position="top">
      <el-form-item label="审核意见：" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入"
          show-word-limit
          maxlength="255"
          rows="2"
        />
      </el-form-item>
    </el-form>
  </base-dialog>
</template>
<script lang="ts" setup name="AuditDialog">
import { computed, reactive, ref, defineProps, defineEmits } from 'vue';
import { BaseDialog } from '@/components/BaseDialog/index';
import { useMessage } from '@/hooks/useMessage';

interface AuditDialogProps {
  visible: boolean;
  title: string;
}
const props = defineProps<AuditDialogProps>();
const emits = defineEmits(['update:visible', 'submit']);
const dialogVisible = computed({
  get: () => {
    return props.visible;
  },
  set: val => {
    emits('update:visible', val);
  }
});

const { createConfirm } = useMessage();
const loading = ref(false);
const formRef = ref();
const form = reactive({
  remark: '' // 审核意见
});

const formRules = reactive({
  remark: [
    {
      required: true,
      message: '请输入审核意见',
      trigger: ['blur', 'change', 'input']
    }
  ]
});

// 弹窗提交
const dialogSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      createConfirm('提示', '是否确认该操作？', {
        iconType: 'warning',
        cancelButtonText: '否',
        confirmButtonText: '是',
        btnType: 'primary'
      }).then(() => {
        emits('submit', form.remark);
        dialogVisible.value = false;
      });
    }
  });
};
</script>
